<template>
	<view class="success-page">
		<!-- 成功提示 -->
		<view class="success-info">
			<image class="success-icon" src="/static/svg/success-icon.svg" mode="aspectFit"></image>
			<view class="success-title">支付成功</view>
			<view class="success-amount">¥{{ paymentAmount.toFixed(2) }}</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-item">
				<text class="item-label">订单编号</text>
				<text class="item-value">{{ orderNumber }}</text>
			</view>
			<view class="info-item">
				<text class="item-label">支付方式</text>
				<text class="item-value">{{ paymentMethod }}</text>
			</view>
			<view class="info-item">
				<text class="item-label">下单时间</text>
				<text class="item-value">{{ orderTime }}</text>
			</view>
		</view>
		
		<!-- 收货地址 -->
		<view class="address-section">
			<view class="section-title">收货地址</view>
			<view class="address-box">
				<view class="name-phone">
					<text class="name">{{ receiverName }}</text>
					<text class="phone">{{ receiverPhone }}</text>
				</view>
				<view class="address-detail">{{ receiverAddress }}</view>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-buttons">
			<view class="btn view-order" @click="viewOrder">查看订单</view>
			<view class="btn back-home" @click="backToHome">返回首页</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	
	// 支付金额
	const paymentAmount = ref(100.00);
	
	// 订单信息
	const orderNumber = ref('202407121234567890');
	const paymentMethod = ref('微信支付');
	const orderTime = ref('2024-07-12 15:30:45');
	
	// 收货人信息
	const receiverName = ref('李小花');
	const receiverPhone = ref('1885138766');
	const receiverAddress = ref('广东省广州市大华区明窗路科技园880号');
	
	// 页面加载
	onLoad((options) => {
		// 如果有传递的参数，则使用传递的参数
		if (options) {
			if (options.amount) paymentAmount.value = Number(options.amount);
			if (options.orderNumber) orderNumber.value = options.orderNumber;
		}
		
		// 生成随机订单号（实际项目中应该从后端获取）
		if (!options || !options.orderNumber) {
			const dateStr = new Date().toISOString().replace(/[-:.TZ]/g, '').substring(0, 14);
			const randomNum = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
			orderNumber.value = dateStr + randomNum;
		}
		
		// 更新订单时间为当前时间
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, '0');
		const day = String(now.getDate()).padStart(2, '0');
		const hours = String(now.getHours()).padStart(2, '0');
		const minutes = String(now.getMinutes()).padStart(2, '0');
		const seconds = String(now.getSeconds()).padStart(2, '0');
		orderTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	});
	
	// 查看订单详情
	const viewOrder = () => {
		uni.navigateTo({
			url: '/pages/group/in?id' + orderNumber.value
		});
	};
	
	// 返回首页
	const backToHome = () => {
		uni.navigateTo({
			url: '/pages/group/success'
		});
	};
</script>

<style>
	.success-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 30rpx;
	}
	
	/* 成功提示 */
	.success-info {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 50rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.success-icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 30rpx;
	}
	.success-title {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.success-amount {
		font-size: 56rpx;
		color: #FF5722;
		font-weight: bold;
	}
	
	/* 订单信息 */
	.order-info {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	.info-item:last-child {
		margin-bottom: 0;
	}
	.item-label {
		font-size: 28rpx;
		color: #666;
	}
	.item-value {
		font-size: 28rpx;
		color: #333;
	}
	
	/* 收货地址 */
	.address-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 60rpx;
	}
	.section-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.name-phone {
		margin-bottom: 10rpx;
	}
	.name {
		font-size: 28rpx;
		color: #333;
		margin-right: 20rpx;
	}
	.phone {
		font-size: 28rpx;
		color: #666;
	}
	.address-detail {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}
	
	/* 操作按钮 */
	.action-buttons {
		display: flex;
		justify-content: space-between;
	}
	.btn {
		width: 330rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 45rpx;
		font-size: 30rpx;
	}
	.view-order {
		background-color: #fff;
		color: #FF5722;
		border: 1px solid #FF5722;
	}
	.back-home {
		background-color: #FF5722;
		color: #fff;
	}
</style> 